<div class="container">
  <div class="before">我是导航栏前面的内容占用高度300px</div>
  <nav>我是导航栏</nav>
  <div class="content">
    <p>我是内容栏</p>
    <p>我是内容栏</p>
    <p>我是内容栏</p>
    <p>我是内容栏</p>
    <p>我是内容栏</p>
    <p>我是内容栏</p>
    <p>我是内容栏</p>
    <p>我是内容栏</p>
  </div>
</div>

<style>
  .container {
    background: #eee;
    width: 600px;
    height: 3000px;
    margin: 0 auto;
  }

  .before {
    width: 100px;
    height: 300px;
  }

  nav {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;

  }

  nav {
    height: 50px;
    background: #999;
    color: #fff;
    font-size: 30px;
    line-height: 50px;
  }

  .content {
    margin-top: 30px;
    background: #ddd;
  }

  p {
    line-height: 40px;
    font-size: 20px;
  }
</style>